<template>
	<view style="height: 100vh;overflow: auto;">
		<view style="display: flex;flex-direction: row;width: 100%;height: 100%;" v-if="cur1.id">
			<view class="goods-type-left" style="padding-bottom: 50px;">
				<view :style="list.id == cur1.id ? 'border-color: ' + set.app_color + ';color:' + set.app_color : ''"
					@click="typeoTop(list)"
					:class="list.id == cur1.id ? 'goods-type-li goods-type-li-active' : 'goods-type-li'"
					v-for="list in typeList" v-if="list.grade == 1">{{ list.name }}</view>
			</view>
			<view class="goods-type-right" style="background-color: transparent; padding-bottom: 50px;">
				<view class="goods-type-banner" v-if="cur1.wap_logo.length && level > 1">
					<img :src="cur1.wap_logo" alt="">
				</view>
				<view class="goods-type-right-box">
					<template v-if="cur1.son == 1">
						<template v-if="set.type_style == 2">
							<view @click="clickType(list)" class="goods-type-info-li" v-for="list in typeList"
								v-if="list.reid == cur1.id">
								<u--image :showLoading="true" :src="list.icon" width="100rpx"
									height="100rpx"></u--image>
								<text>{{ list.name }}</text>
							</view>
						</template>
						<template v-else>
							<view @click="clickType(list)" class="goods-type-ka-li" v-for="list in typeList"
								v-if="list.reid == cur1.id">
								<view class="goods-type-ka">
									<text>{{ list.name }}</text>
									<img :src="list.icon" alt="">
								</view>
							</view>
						</template>
					</template>

					<template v-else>
						<view class="goods-type-ka-li">
							<view @click="clickType(cur1)" class="goods-type-ka" style="">
								<img class="bg" :src="cur1.icon" alt="" mode="center">
								<text class="u-line-1">{{ cur1.name }}</text>
							</view>
						</view>
					</template>

				</view>
			</view>
		</view>

	</view>
</template>
<script>
export default {
	name: "GoodsTypeComponent", // 重构类名
	data() {
		return {
			cur1: {},
			cur2: {},
			typeList: [],
			level: 1,
		};
	}, props: {
		set: {
			default() {
				return {
					app_color: 'red',
					type_style: 1
				}
			}
		}
	}, created: function () {
		this.getType();
	}, methods: {
		clickType(type) {
			if (type.grade == 2) {
				this.cur2 = type;
			}
			if (type.grade == 2) {
				if (type.son == 1) {
					let son = [];
					for (let k in this.typeList) {
						if (this.typeList[k].reid == type.id) {
							son.push({
								id: this.typeList[k].id,
								name: this.typeList[k].name
							})
						}
					}
					this.navto('page_mall/goods/list?top_column_id=' + type.id + "&son_type=" + JSON.stringify(son))
				} else {
					this.navto('page_mall/goods/list?column_id=' + type.id)
				}

			} else {
				this.navto('page_mall/goods/list?column_id=' + type.id)
			}
		},
		getType() {
			let self = this;
			this.moxiPost('/plugin/mall/index/type/get', {}, function (data) {
				for (let k in data.data.type) {
					self.typeoTop(data.data.type[k]);
					break;
				}
				self.typeList = data.data.type;
				self.level = data.data.level;
			})
		},
		typeoTop(ob) {
			this.cur1 = ob;
		}
	}
}
</script>
<style lang="scss" scoped>
.goods-type-left {
	width: 20%;
	height: 100%;
	min-width: 230rpx;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #fff;
}

.goods-type-right {
	margin: 10rpx;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	width: 100%;
}

.goods-type-right-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.goods-type-li {
	padding: 30rpx 0;
	width: 100%;
	text-align: center;
	font-size: 28rpx;
	color: #666666;
	font-family: STHeiti;
}

.goods-type-li-active {
	background-color: var(--bg-color);
	border-left: red 8rpx solid;
	color: red;
}

.goods-type-info-li {
	width: 33%;
	flex-direction: column;
	text-align: center;
	display: flex;
	align-items: center;
	margin: 20rpx 0;

	img {
		width: 100rpx;
		height: 100rpx;
	}

	text {
		font-size: 25rpx;
		color: #333333;
		margin-top: 10rpx;
	}
}

.goods-type-banner {
	width: 100%;
	text-align: center;

	img {
		max-width: 100%;
		height: 200rpx;
	}
}

.goods-type-ka-li {
	width: 100%;
	margin-top: 10px;
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;

	.goods-type-ka {
		width: 100%;
		height: 150rpx;
		align-items: center;
		border-radius: 12rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: relative;

		text {
			width: 100%;
			position: absolute;
			color: #fff;
			text-indent: 40rpx;
			z-index: 1;
			background-color: rgba($color: #000000, $alpha: 0.3);
			bottom: 0;
			left: 0;
			font-size: 28rpx;
		}

		img {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

}
</style>